import { Avatar, Dropdown, Button, Modal, message, Popover } from "antd";
import {
  UserOutlined,
  LoginOutlined,
  ExclamationCircleFilled,
  VideoCameraOutlined,
  EditOutlined,
  OrderedListOutlined,
  VideoCameraAddOutlined,
} from "@ant-design/icons";
import type { MenuProps } from "antd";
import React, { useState, useEffect } from "react";
import Login from "@/components/login";
import { useNavigate } from "react-router-dom";
import { loginOut as loginOutApi } from "@/api/login";
import to from "await-to-js";
import { clearUserInfo } from "@/store/features/user";
const UserAvatar: React.FC = () => {
  const navigateTo = useNavigate();
  const [isLogin, setIsLogin] = useState(false);
  const [open, setOpen] = useState(false);
  // 登录按钮
  const handleLogin = () => {
    if (isLogin) {
      setIsLogin(false);
    } else {
      setOpen(true);
    }
  };
  // 跳转到个人中心
  const handlePushToPersonalCenter = () => {
    navigateTo("/home/personal");
  };
  // 退出登录按钮
  const handleLoginOut = async () => {
    // 是否确定退出登录
    Modal.confirm({
      title: "提示",
      icon: <ExclamationCircleFilled />,
      content: "你将退出登录，是否退出登录？",
      async onOk() {
        const [err, res] = await to(loginOutApi());
        if (!err) {
          console.log(res);
          setIsLogin(false);
          localStorage.clear();
          message.info("退出成功");
        } else {
          message.error("登出失败");
        }
      },
      onCancel() {
        message.info("取消成功");
      },
    });
  };
  /**
   * 改变登录状态
   * @param login 登录状态
   */
  const changeLoginStatus = (login: boolean) => {
    // 如果登录成功
    if (login) {
      setIsLogin(login);
      setOpen(false);
    }
  };
  // 关闭弹出框
  const closeModal = () => {
    setOpen(false);
  };
  // 登录后头像下拉框数据
  const items: MenuProps["items"] = [
    {
      key: "1",
      label: <div onClick={handlePushToPersonalCenter}>个人中心</div>,
    },
    {
      key: "2",
      label: (
        <>
          <div onClick={handleLoginOut}>退出登录</div>
        </>
      ),
    },
  ];
  // 未登录弹出框
  const popoverContent = (
    <>
      <div
        className="w100 text-center text-current font-bold  text-lg"
        style={{ color: "rgba(39,110,81)" }}
      >
        登录后你可以
      </div>

      <div
        className="flex justify-around text-center text-current font-bold  m3"
        style={{ color: "rgba(39,110,81)" }}
      >
        <div>
          <EditOutlined className="m2" style={{ fontSize: "16px" }} />{" "}
          评论相关视频
        </div>
        <div>
          {" "}
          <VideoCameraOutlined className="m2" style={{ fontSize: "16px" }} />
          多端同步播放记录
        </div>
      </div>
      <div
        className="flex justify-around text-center text-current font-bold m3"
        style={{ color: "rgba(39,110,81)" }}
      >
        <div>
          <OrderedListOutlined className="m2" style={{ fontSize: "16px" }} />
          发表弹幕/评论
        </div>
        <div>
          <VideoCameraAddOutlined className="m2" style={{ fontSize: "16px" }} />
          热门番剧影视看不停
        </div>
      </div>

      <div className="text-center">
        <Button
          className="w80"
          style={{
            backgroundColor: "rgba(39,110,81)",
            color: "#fff",
            border: "1px solid rgba(39,110,81)",
          }}
          type="default"
          shape="round"
          // groupBorderColor={'rgba(39,110,81)'}
          icon={<LoginOutlined />}
          size="middle"
          onClick={handleLogin}
        >
          登录
        </Button>
      </div>
    </>
  );

  // 生命周期挂载函数
  useEffect(() => {
    // 在组件挂载后执行操作
    // 返回一个函数来执行清理工作（可选）
    const token = localStorage.getItem("token");
    if (token) {
      setIsLogin(true);
    } else {
      setIsLogin(false);
    }
    return () => {
      // 清理工作
    };
  }, []);
  return (
    <>
      <Dropdown menu={{ items }} placement="bottom">
        <Avatar
          style={{
            margin: "0 0 0 20px",
            display: isLogin ? "" : "none",
            backgroundColor: "#87d068",
          }}
          size="large"
          icon={<UserOutlined />}
        />
      </Dropdown>
      {/* <Dropdown menu={{ items }} placement="bottom"> */}
      <Popover content={popoverContent}>
        <Avatar
          style={{
            margin: "0 0 0 20px",
            display: isLogin ? "none" : "",
          }}
          size="large"
          icon={<UserOutlined />}
        />
      </Popover>
      {/* </Dropdown> */}
      {/* 动态展示登录框 */}
      <Modal centered onCancel={closeModal} open={open} footer={null}>
        <Login isLogin={isLogin} changeLoginStatus={changeLoginStatus}></Login>
      </Modal>
    </>
  );
};

export default UserAvatar;
